<template>
  <div class="container-y">
      <div class="list">
          <div class="listbox">
              <div v-if="lawyerList" v-for="(item, index) in lawyerList" :key="index">
              <!-- <router-link  :to="{ path: '/LawyerDetail/'+item.id+'&'+openId,query:{userId:'12'}}"> -->
              <div @click="handleDetail(item.id)">
                  <div class="list-top">
                      <div class="imgbox">
                          <img :src="item.image" alt="">
                          <!-- <img src="../assets/tx-l.png" alt=""> -->
                      </div>
                      <div class="textbox">
                          <div class="name">{{item.name}}</div>
                          <div class="indro">简介：
                          {{item.context}}
                          </div>
                      </div>
                  </div>
                  <div class="rate-box">
                      <span class="rate-title">综合评分:</span>
                      <rater v-model="item.totalScore" active-color="#feba4e" :font-size="38" disabled :margin="22"></rater>
                      <span class="grade">{{item.totalScore}}分</span>
                  </div>
                <!-- </router-link> -->
              </div>
              </div>
          </div>
          
      </div>

  </div>
</template>
<script>
import { Rater, Group, Cell, Range } from 'vux'
export default {
    components: {
    Rater,
    Group,
    Cell,
    Range
  },
  data(){
    return{
      lawyerList: null,
      totalScore: '',
      intro: '',
      lawyerImage:'',
      openId: '',
      data6:3.5
    }
  },
  created(){
    // let hrefUrl = window.location.href
    // console.log(hrefUrl)
    // console.log(this.$route)
    // let data = this.$route.params.openId
    // // this.lawyerId= data.split('&')[0];
    // this.openId = data.split('&')[1];
    this.fetchLawyerList()
  },
  mounted(){

  },
  methods:{
    fetchLawyerList(){
      let listQuery = {
        pageNumber: 1,
        pageSize: 100,
        param: {
          name: '',
        }
      }
      this.$axios.post('http://www.chenyekeji.com/law/device/lawyer/list',listQuery).then((res) => {
        console.log(res) 
        this.lawyerList = res.data.data.list
      })
    },
    handleDetail(lawyerId){
      // let _str = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx4c38faefa91a2ee0&redirect_uri=https%3a%2f%2fwww.chenyekeji.com%2flaw_wx%2f%23%2fClassTypes%2f&response_type=code&scope=snsapi_userinfo&state="+lawyerId+"#wechat_redirect"
      window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx4c38faefa91a2ee0&redirect_uri=https%3a%2f%2fwww.chenyekeji.com%2flaw%2fdevice%2fwx%2f&response_type=code&scope=snsapi_userinfo&state="+lawyerId+"#wechat_redirect";
    }
  }
}
</script>
<style scoped>
.grade{
    font-size:28px ;
    color: #777777;
    padding-left:46px;
}
.rate-title{
    position: relative;
    padding-left:46px;
    line-height: 57px;
    padding-right: 48px;
}
.rate-title::before{
    content: '';
    position: absolute;
    left: 0;
    top:0;
    height: 100%;
    width: 46px;
    background: url(../assets/title-icon.png) no-repeat center left;
    background-size: 34px;
}
.rate-box{
    height: 57px;
    background: #fafafa;
    text-align: left;
    line-break: 57px;
    display: flex;
    align-items: center;
    padding:0 32px;
    font-size: 26px;
    color: #666666;
}
.container-y{
    height:100%;
    width:100%;
   background: #eeeeee;
}
.listbox{
    margin-bottom:12px;
    background: #fff;
   }
.list-top{
    display: flex;
    height: 200px;
     padding:0 32px;
    align-items: center;
}
.imgbox{
   height: 114px;
   width: 114px;
   border-radius: 100%;
   border:6px solid #e6e6e6;
}
.imgbox img{
   width: 100%;
   height:100% ;
   border-radius: 100%;
}
.textbox{
   flex: 1;
   height: 200px;
   padding-left: 26px;
}
.name{
    padding-top:40px;
    text-align: left;
    font-size: 28px;
    color:#444444;
    padding-bottom:20px; 
}
.indro{
    text-align: left;
    display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
  text-overflow:ellipsis;
  height: 70px;
  color: #999999;
   font-size: 26px;
  overflow: hidden;
}
.title{
  font-size: 26px;
  color: #666666;
}
</style>
